package HTML5_2024_6_13;

public class M3_13 {
    /*`````````````````````````````````````````````````````M3_14`````````````````````````````````````````````````````*/
    // 适合redis存储的数据
    /**
     * 频繁访问但更新较少
     *  分类: 产品信息 用户个人信息 配置参数等
     *  原因: 读取频率高 更新频率低 通过缓存 能减少数据库查询次数 提高访问速度
     * 计算代价高 且不常变化
     */
    /*``````````````````````````````````````````````M3_15(2024年6月17日)``````````````````````````````````````````````*/
    // 面试题
    // 前后端不分离项目与分离项目的区别
    /**
     * 前后端不分离 前后端耦合度高
     *
     * 前后端分离 前后端解耦
     * 一套后端代码 能够对应多个前端页面
     * 优点: 独立开发与部署 - 前后端独立开发 测试和部署 提高开发效率
     *      技术选型自由 - 前后端能够选择各自最合适的技术线
     *      负载均衡 - 分别对前后端进行优化和扩展 以更好地处理流量负载
     *      维护性强 - 代码职责单一 易于维护和迭代
     * 缺点: 跨域问题 - 可以通过CORS解决跨域问题
     *      复杂性增加
     */
    // 如何在SpringBoot中使用CORS解决跨域问题
    // 如何在Vue3.0中与SpringBoot后端进行数据交互
    /**
     * 可以使用axios库进行后端的数据交互
     *
     * 安装: npm install axios(命令)
     * 使用: import axios from 'axios'(JS语句)
     */
    // 什么是Axios 主要特点是什么
    // 什么是Node.js
    // npm(Node Package Manager)是什么
    // package.json是什么
    // 关系:
    /**
     * Node.js 与 npm
     *  1.Node.js安装之后会自动安装npm
     *  2.npm用于管理项目中的依赖包
     * npm 与 package.json
     * npm 和 Vue.js
     * package.json 和 Vue.js 项目
     */
    /*`````````````````````````````````````````````````2024年6月18日`````````````````````````````````````````````````*/
    // 什么是数据库事务
    /**
     * 遵循ACID特性
     * 原子性(Atomically):
     * 一致性():
     * 隔离性():
     * 持久性():
     */
    // MySQL中常用的事务语句有哪些
    // 事务的隔离级别
    /**
     * 是为了事务在并发执行时解决数据一致性问题
     */
    // 事务并发会产生哪些常见问题
    /**
     * 事务的并发执行可能会产生三种常见的问题: 脏读 不可重复读 幻读
     * 脏读:
     * 不可重复读: 数据的修改
     * 幻读: 数据的新增或修改
     */
    // 事务的隔离级别(数据库的状态 可自行修改)有哪些
    /**
     * 读未提交: 一个事务可以读取到其他事务尚未提交的数据
     * 读已提交: 一个事务只能读取到其他事务已经提交的数据
     * 可重复读: MySQL的默认隔离级别 在一个事务中 多个读取操作的结果是一致的 即使其他事务提交了数据
     * 串行化: 最高隔离级别 所有事务串行化执行
     */
    /*````````````````````````正课````````````````````````*/
    // 工作流
    // 泳道图
//    <!--<template>-->
//<!--  <h1>用车申请页</h1>-->
//<!--</template>-->
//
//<!--<script setup>-->
//
//<!--</script>-->
//
//<!--<style scoped>-->
//
//<!--</style>-->
//<!-- v-model:action="" 属性值表示上传图片的路径 自动连接到对应的后端接口上 不需要添加`axios`方法 -->
//<template>
//  <el-upload
//    v-model:file-list="fileList"
//    v-model:action="actionUrl"
//    name="file"
//    limit="1"
//    list-type="picture-card"
//            :on-preview="handlePictureCardPreview"
//            :on-remove="handleRemove"
//            >
//    <el-icon>
//      <Plus/>
//    </el-icon>
//  </el-upload>
//
//  <el-dialog v-model="dialogVisible">
//    <img w-full :src="dialogImageUrl"/>
//  </el-dialog>
//
//  <hr>
//  <h4>预览时显示后端返回的图片路径: <span>{{ tempImgUrl }}</span></h4>
//  <img :src="BASE_URL+tempImgUrl" alt="">
//</template>
//
//<script setup>
//import {ref} from 'vue'
//            import axios from "axios";
//import {ElMessage} from "element-plus";
//// 定义数组用于保存客户端上传的图片对象
//// 图片的存储分为两部分 url地址部分存储在应用数据库中 而真实的图片保存在指定的图片服务器中
//const fileList = ref([])
//
//const dialogImageUrl = ref('')
//const dialogVisible = ref(false)
//
////定义变量用来保存图片提交的后端接口地址
//const actionUrl = ref(BASE_URL + '/v1/file/upload');
//
//// 处理图片删除功能 - 点击上传组件"垃圾桶"图标时触发
//const handleRemove = (uploadFile, uploadFiles) => {
//        console.log(uploadFile, uploadFiles)
//        // 1.得到要删除图片的路径 这个路径就是后端传回的 日期路径+文件名
//        let imgUrl = uploadFile.response.data;
//        // console.log(imgUrl);
//        // 2.给后端发送请求 删除对应路径下磁盘中的图片
//        axios.post(BASE_URL + '/v1/file/remove?imgUrl=' + imgUrl).then((response) => {
//        if (response.data.code === 2000) {
//            ElMessage.success('删除成功!');
//        }
//  })
//    }
//
//// 定义一个变量用于保存图片路径
//const tempImgUrl = ref('');
//const handlePictureCardPreview = (uploadFile) => {
//        dialogImageUrl.value = uploadFile.url
//        dialogVisible.value = true
//        // console.log('*************')
//        // console.log(fileList.value)
//        // console.log(fileList.value[0].response.data)
//        tempImgUrl.value = fileList.value[0].response.data;
//        console.log('**************')
//        console.log(tempImgUrl.value)
//    }
//
//</script>
    /*``````````````````````````````````````````````````2024年6月19日``````````````````````````````````````````````````*/
    // 什么是@Transactional注解
    /**
     * Spring提供的注解 用于管理事务边界
     */
    // 什么时候使用@Transactional
    // 为什么使用@Transactional
    // 怎么使用@Transactional
    /**
     * 用于类或方法 在例如对数据库操作等业务方面的方法上或业务层的类上添加注解
     */
    // 通过 rollbackFor属性 和 noRollbackFor属性 自定义回滚行为
    // 通过 propagation属性 配置事务的传播行为
    // 通过 isolation属性 配置事务的隔离级别

    // 数据库索引是什么
    /* 常见索引类型包含B树索引 哈希索引 全文索引等 */
    // 什么时候使用索引
    /*
        查询频繁的列
        主键和唯一键
        外键
        大表
     */
    // 为什么使用索引
    /*
        提高查询效率
        加快排序和分组
        强制唯一性
     */
    // 怎么使用索引
    /*
        创建索引
        创建多列索引
        创建唯一索引
        删除索引
        查看索引
     */
    // 注意事项
    /*
        索引开销 虽然索引能狗加快查询速度 但是会额外占据存储空间 并在插入 更新 删除操作时增加额外的维护开销
        索引选择性
     */
    // 索引的底层
    /*
        1.B树(B-Tree)和B+树(B+Tree)
        2.哈希表(Hash Table)
        3.全文索引(Full-text Index): 基于倒排索引
     */
    // 索引失效
    /*
        1.函数表达式
        2.隐式类型转换
        3.前缀匹配问题
        4.LIKE模式不以通配符开头
        5.不等于操作和范围查询
        6.OR条件
        7.数据分布不均
        8.索引列参与计算
     */
    // 索引失效措施
    /*`````````````````````````````正课`````````````````````````````*/
    /**
     * useGeneratedKeys="true" keyProperty="id"
     * 该属性表示: 利用JDBC操作数据库 生成主键并赋值给id字段
     * 格式为
     *      <insert id="方法名" useGeneratedKeys="true" keyProperty="id">
     *          SQL语句
     *      </insert>
     */

}
